//
// Tables
// --------------------------------------------------

// Baseline styles
.table {
	> thead,
    > tbody,
    > tfoot {
    	> tr {
    		> th,
    		> td {
				color: @black;
    			padding: 12px 8px;
    			vertical-align: middle;
    		}
    	}
	}
	> thead > tr > th,
	> tfoot > tr > th {
		font-weight: 600;
		border-bottom: 1px solid @light-gray;
		color: @darker-gray;
		text-transform: uppercase;
	}
}

// Generate the contextual variants
.table-row-variant(active; @primary);
.table-row-variant(success; @success);
.table-row-variant(info; @info);
.table-row-variant(warning; @warning);
.table-row-variant(danger; @danger);

.table-row-variant(@state; @background) {
	.table > thead > tr,
	.table > tbody > tr,
	.table > tfoot > tr {
		> td.@{state},
		> th.@{state},
		&.@{state} > td,
		&.@{state} > th {
			background-color: lighten(@background, 30%);
		}
	}
	.table-hover > tbody > tr {
		> td.@{state}:hover,
		> th.@{state}:hover,
		&.@{state}:hover > td,
		&:hover > .@{state},
		&.@{state}:hover > th {
			background-color: lighten(@background, 20%);
		}
	}
}